<template>
  <div class="wrap">
    <!-- 左边部门列表的卡片 -->
    <CCard class="CBC-bg-toRight dept_list_card w-400">
      <div class="header_box">
        <span class="title_text">部门列表</span>
        <span class="sum_text">共 - {{ deptDataList.length }} - 个</span>
      </div>
      <a-list bordered :data-source="deptDataList" class="a_list">
        <template #renderItem="{item}">
          <a-list-item
            class="a_list_item"
            :class="{a_list_item_selected: currentSelectedDeptDDId == item.deptDDId}"
            @click="deptListItemClick(item.deptDDId)"
            >{{ item.deptName }}</a-list-item
          >
        </template>
      </a-list>
    </CCard>

    <!-- 右边的员工列表的卡片 -->
    <div class="staff_box">
      <CCard class="CBC-bg-toRight staff_search_card">
        <div class="search_box">
          <span>员工姓名</span>
          <a-input
            style="width: 180px; margin-right: 20px"
            v-model:value="currentSearchStaffKeyword"
          ></a-input>
          <a-button type="primary" @click="staffSearchClick">
            <template #icon
              ><SearchOutlined style="position: relative; top: -2px; left: 2px"
            /></template>
            <span style="letter-spacing: 2px; position: relative; left: -2px">查询</span>
          </a-button>
        </div>
      </CCard>
      <CCard :loading="isStaffTableLoading" class="CBC-bg-toRight staff_list_card">
        <div class="noData_box" v-if="staffDataList.length == 0">
          <svg
            t="1694565370884"
            class="icon"
            viewBox="0 0 1575 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6162"
            width="400"
            height="400"
          >
            <path
              d="M1365.14701 240.181c17.39 0 31.504-14.019 31.504-31.314a31.409 31.409 0 0 0-31.504-31.346c-17.405 0-31.503 14.019-31.503 31.346 0 17.295 14.098 31.314 31.503 31.314z m0 31.346c-34.81 0-63.006-28.07-63.006-62.66 0-34.607 28.195-62.66 63.006-62.66s63.007 28.038 63.007 62.66c0 34.59-28.195 62.644-63.007 62.644zM63.03801 365.485c17.406 0 31.503-14.019 31.503-31.33a31.409 31.409 0 0 0-31.503-31.33c-17.39 0-31.503 14.02-31.503 31.33 0 17.311 14.113 31.33 31.503 31.33z m0 31.33C28.22701 396.815 0.01601 368.777 0.00001 334.187c-0.016-34.607 28.18-62.676 62.975-62.692h0.063c34.795 0 63.007 28.054 63.007 62.66s-28.212 62.66-63.007 62.66z m399.02 125.305c0-11.515 9.389-20.887 20.966-20.887H630.13001a20.887 20.887 0 1 1 0 41.773H483.02401a20.855 20.855 0 0 1-20.95-20.76v-0.126z m0-104.434c0-11.53 9.357-20.87 20.872-20.87h336.297a20.87 20.87 0 1 1 0 41.773H482.94501a20.824 20.824 0 0 1-20.87-20.792v-0.095z m0-104.417a20.95 20.95 0 0 1 20.998-20.887h231.029a20.95 20.95 0 0 1 21.013 20.887 20.95 20.95 0 0 1-21.013 20.886H483.07001a20.887 20.887 0 0 1-21.012-20.76v-0.126zM683.35401 804.83a104.04 104.04 0 0 0 0-147.703 105.441 105.441 0 0 0-148.538 0 104.04 104.04 0 0 0 0 147.703 105.441 105.441 0 0 0 148.538 0zM21.02801 939.822c0-11.515 9.514-20.871 20.95-20.871h126.124a20.87 20.87 0 1 1 0 41.773H41.97801c-11.562 0-20.95-9.293-20.95-20.792v-0.095zM267.81001 47.019h31.283c8.821 0 15.957 6.946 15.957 15.657 0 8.647-7.136 15.657-15.957 15.657H267.81001v31.125c0 8.774-6.993 15.878-15.751 15.878a15.815 15.815 0 0 1-15.752-15.878v-31.14h-31.298a15.767 15.767 0 0 1-15.957-15.563v-0.095c0-8.648 7.136-15.657 15.957-15.657h31.298V15.878C236.30601 7.104 243.28401 0 252.05801 0c8.695 0 15.751 7.104 15.751 15.878v31.125z m740.296 767.498h63.18a41.9 41.9 0 0 0 41.82-41.773v-605.65a41.742 41.742 0 0 0-41.82-41.774H566.87001a41.9 41.9 0 0 0-41.805 41.773v20.887h398.958c46.341-0.11 83.988 37.158 84.098 83.232v543.321zM857.47201 918.951h66.787a41.758 41.758 0 0 0 41.836-41.884V270.424a40.545 40.545 0 0 0-40.529-40.686H418.60001a40.608 40.608 0 0 0-40.56 40.686v606.659c0 23.123 18.901 41.883 41.82 41.883h318.813l-10.805-10.758a41.537 41.537 0 0 1-10.916-40.371L697.12001 848.1c-65.148 48.216-157.264 34.795-205.763-29.991a145.624 145.624 0 0 1 13.75-190.5c57.305-57.18 150.398-57.368 207.907-0.363a145.592 145.592 0 0 1 13.814 191.32l19.847 19.736a42.025 42.025 0 0 1 40.592 10.837l70.205 69.827zM780.70001 960.724H251.99501c-11.562 0-20.934-9.293-20.95-20.792v-0.095c0-11.53 9.514-20.886 20.95-20.886h95.234a82.665 82.665 0 0 1-11.183-41.68v-605.87c0.031-46.09 37.646-83.452 84.003-83.42h63.022v-21.014c0.016-46.105 37.631-83.452 83.988-83.436h503.99c46.325-0.11 83.972 37.174 84.082 83.247V772.87a82.696 82.696 0 0 1-11.2 41.663h116.185c11.624 0 21.028 9.294 21.028 20.887 0 11.53-9.357 20.886-20.997 20.886h-252.042v20.982c0 15.184-4.08 29.408-11.2 41.678h11.263a20.87 20.87 0 1 1 0 41.774H897.68601a41.474 41.474 0 0 1-6.458 50.846 42.057 42.057 0 0 1-59.226 0.142l-0.158-0.158-51.13-50.83z m762.962-344.599v-21.107a10.302 10.302 0 0 0-10.38-10.238l-0.127 0.015a10.46 10.46 0 0 0-10.49 10.239v21.107h-21.218a10.302 10.302 0 0 0-10.285 10.302v0.126c0 5.592 4.615 10.443 10.285 10.443h21.218v21.092c0 5.749 4.694 10.238 10.49 10.238 5.718 0 10.397-4.552 10.507-10.238v-21.108h21.217a10.46 10.46 0 0 0 0-20.886h-21.217zM157.54801 699.688h21.202a10.46 10.46 0 0 1 0 20.887h-21.202v21.091a10.475 10.475 0 0 1-10.506 10.239 10.317 10.317 0 0 1-10.507-10.129V720.56h-21.201a10.475 10.475 0 0 1-10.302-10.428c0-5.765 4.52-10.443 10.302-10.443h21.201V678.58a10.46 10.46 0 0 1 10.507-10.239c5.796 0 10.506 4.505 10.506 10.239v21.107z"
              fill="#b2bcc5"
              p-id="6163"
            ></path>
          </svg>
          <span style="font-weight: 400; font-size: 16px; letter-spacing: 2px">暂无数据</span>
        </div>
        <a-table
          v-else
          :dataSource="staffDataList"
          :columns="staffTableColums"
          :row-key="
            (record:staffType, index:number) => {
              return index
            }
          "
          :pagination="false"
          :customRow="staffHandleClick"
        >
          <!-- 姓名插槽 -->
          <template #userName="{text}">
            <a-avatar :src="compUserNameAvatar(text)" style="margin-right: 6px" />
            <span>{{ text }}</span>
          </template>

          <!-- 状态插槽 -->
          <template #status="{text}">
            <span v-if="text == 1">正常</span>
            <span v-else>离职</span>
          </template>
          <!-- 操作插槽 -->
        </a-table>
      </CCard>
    </div>
  </div>
</template>

<script lang="ts">
  import {defineComponent, ref, onMounted, computed} from 'vue'
  export default defineComponent({
    name: 'departmentPerformance'
  })
</script>
<script lang="ts" setup>
  // 引入
  import {SearchOutlined} from '@ant-design/icons-vue'
  import {deptType, deptListType, staffType, staffListType} from './type.ts'
  import {selectManagerDeptApi, selectStaffListApi} from '@/api/departmentPerformance.ts'
  import {CCard} from '@/components/card'
  import useGlobalAPI from '@/hooks/useGlobalAPI'
  const {router, store, route} = useGlobalAPI()

  const loginUserInfo = computed(() => store.getters['dingding/ddUserInfo'])

  // 员工表格事件函数
  const staffHandleClick = (record: staffType, index: number) => {
    return {
      // onClick: () => {
      //   console.log(111)
      // },
      ondblclick: () => {
        console.log(record)
        router.push({path: '/individualPerformance', query: {individualDDId: record.userId}})
      }
    }
  }

  // // 员工的双击事件
  // const staffDblclick = e => {
  //   console.log(e)
  // }

  // 员工查询的点击事件
  const staffSearchClick = () => {
    selectStaffListFunc()
  }

  // 计算表格姓名项的头像地址的函数
  const compUserNameAvatar = (userName: string) => {
    let avatarUrl = ''
    staffDataList.value.forEach((item: staffType) => {
      if (item.userName == userName) {
        avatarUrl = item.avatar
      }
    })
    return avatarUrl
  }

  // 部门列表每项的点击事件
  const deptListItemClick = (deptId: string) => {
    currentSelectedDeptDDId.value = deptId
    console.log(deptId)
    selectStaffListFunc()
  }

  // 查询部门列表的函数
  const selectDepartmentListFunc = async () => {
    const res = await selectManagerDeptApi({userDDId: loginUserInfo.value.userId})
    console.log(res.data)
    deptDataList.value = res.data
  }

  // 查询员工列表的函数
  const selectStaffListFunc = async () => {
    isStaffTableLoading.value = true
    let data = {
      userDDId: loginUserInfo.value.userId,
      page: currenPage.value,
      size: pageSize.value,
      deptDDId: currentSelectedDeptDDId.value,
      userName: currentSearchStaffKeyword.value
    }
    const res = await selectStaffListApi(data)
    staffDataList.value = res.data.list
    total.value = res.data.total
    console.log(staffDataList.value)
    isStaffTableLoading.value = false
  }

  // 将查询得到的部门数据处理成想要的数据

  /* 数据 -------------------------------- */
  /* 员工 */

  // 员工表格的加载状态标识
  const isStaffTableLoading = ref(false)

  // 员工表格的字段规则
  const staffTableColums = ref([
    {
      title: '姓名',
      dataIndex: 'userName',
      slots: {
        customRender: 'userName'
      }
    },
    {
      title: '部门',
      dataIndex: 'deptName',
      slots: {
        customRender: 'deptName'
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      slots: {
        customRender: 'status'
      }
    }
    // {
    //   title: '操作',
    //   dataIndex: 'operation',
    //   slots: {
    //     customRender: 'operation'
    //   }
    // }
  ])

  // 员工列表数据
  const staffDataList = ref<staffListType>([])

  // 当前搜索员工的关键字数据
  const currentSearchStaffKeyword = ref('')

  // 当前页码
  const currenPage = ref(1)

  // 每页条数
  const pageSize = ref(10)

  // 总共几条
  const total = ref(0)
  /* 部门 */

  // 当前选中的部门id
  const currentSelectedDeptDDId = ref('')

  // 部门列表数据
  const deptDataList = ref<deptListType>([])

  // 初始化
  onMounted(() => {
    selectDepartmentListFunc()
  })
</script>

<style lang="less" scoped>
  .wrap {
    display: flex;
    flex-direction: row;

    .dept_list_card {
      width: 400px;
      height: 90vh;

      .header_box {
        margin-bottom: 10px;
        position: relative;
        .title_text {
          color: rgb(49, 69, 106);
          // font-family: kaigengo-medium;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          letter-spacing: 1px;
        }

        .sum_text {
          color: gray;
          font-family: kaigengo-medium;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
          position: absolute;
          bottom: 0px;
          right: 0px;
        }
      }

      .a_list {
        // background-color: white;
        overflow: auto;
        height: 80vh;
        .a_list_item {
          background-color: white;
          margin-bottom: 8px;
        }

        .a_list_item_selected {
          background-color: #5092fc;
          color: white;
        }
      }
    }

    .staff_box {
      margin-left: 16px;
      width: 1310px;
      height: 90vh;
      display: flex;
      flex-direction: column;

      .staff_search_card {
        margin-bottom: 16px;

        .search_box {
          line-height: 33px;
          display: flex;
          flex-direction: row;

          span {
            margin-right: 6px;
          }
        }
      }
      .staff_list_card {
        position: relative;
        // margin-left: 16px;
        height: 80vh;

        .noData_box {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -0%);
          .icon {
            width: 300px;
            height: 300px;
          }

          span {
            font-size: 22px;
            font-weight: 600;
            letter-spacing: 3px;
            display: inline-block;
            width: 100%;
            text-align: center;
            position: relative;
            top: -40px;
          }
        }
      }
    }
  }
  // ::v-deep .ant-list {
  //   height: 100vh;
  // }
</style>
